GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>Less (Stylesheet-Sprache)</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">Less (Stylesheet-Sprache)</h1>

</header>

</div>

<th colspan="2" class="hintergrundfarbe6" style="font-size:larger;">Less

</th></tr>

<tr>

</td></tr>

<tr>

<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten

</th></tr>

<tr>

<td>Erscheinungsjahr:

</td>

<td>2009

</td></tr>

<tr>

<td>Designer:

</td>

<td>Alexis Sellier

</td></tr>

<tr>

<td>Entwickler:

</td>

<td>Alexis Sellier, Dmitry Fadeyev

</td></tr>

<tr>

<td>Aktuelle <a href="Version_(Software)" title="Version (Software)">Version</a>

</td>

<td class="wikidata-content" style="white-space:nowrap;">4.4.2<a href="#cite_note-_dee2248ffb0e4372-1">[1]</a> (6. Oktober 2025)

</td></tr>

<tr>

<td><a href="Typisierung_(Informatik)" title="Typisierung (Informatik)">Typisierung</a>:

</td>

<td><a href="Dynamische_Typisierung" title="Dynamische Typisierung">Dynamisch</a>

</td></tr>

<tr>

<td>Beeinflusst von:

</td>

</td></tr>

<tr>

<td>Beeinflusste:

</td>

</td></tr>

<tr>

<td><a href="Betriebssystem" title="Betriebssystem">Betriebssystem</a>:

</td>

<td><a href="Plattform%C3%BCbergreifend" class="mw-redirect" title="Plattformübergreifend">plattformübergreifend</a>

</td></tr>

<tr>

<td><a href="Lizenz" title="Lizenz">Lizenz</a>:

</td>

<td><a href="Apache-Lizenz_2.0" class="mw-redirect" title="Apache-Lizenz 2.0">Apache-Lizenz, Version 2.0</a><a href="#cite_note-_c17f153534de1446-2">[2]</a>

</td></tr>

<tr>

<td colspan="2" class="hintergrundfarbe5" style="text-align:center;"><a rel="nofollow" class="external text" href="http://lesscss.org/">lesscss.org</a>

</td></tr></tbody></table>

Less (<a href="Englische_Sprache" title="Englische Sprache">englisch</a> für weniger) ist eine <a href="Stylesheet-Sprache" title="Stylesheet-Sprache">Stylesheet-Sprache</a> mit dem Ziel, das Schreiben von <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> effizienter zu gestalten. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. Less ist eine Obermenge von CSS, das heißt, ein CSS-Code ist gleichzeitig auch gültiger Less-Code. Less wird zu CSS <a href="Compiler" title="Compiler">kompiliert</a>.<a href="#cite_note-t3n-besseres-css-mit-less-3">[3]</a>

<div class="mw-heading mw-heading2"><h2 id="Geschichte">Geschichte</h2></div>

Die Sprache wurde von Alexis Sellier (auch bekannt als Cloudhead) entwickelt und im Jahr 2009 veröffentlicht. Anfangs wurde der Less-Compiler in <a href="Ruby_(Programmiersprache)" title="Ruby (Programmiersprache)">Ruby</a> entwickelt. Später entschied man sich dazu, auf <a href="JavaScript" title="JavaScript">JavaScript</a> umzusteigen.<a href="#cite_note-lesscss-org-about-4">[4]</a>

<div class="mw-heading mw-heading2"><h2 id="Eigenschaften">Eigenschaften</h2></div>

Zusätzlich zu den normalen <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a>-Anweisungen bietet Less die Schachtelung von Regeln, wodurch Code-Wiederholungen vermieden werden können. Beispielsweise können einer (bestehenden oder vom Programmierer festgelegten) Klasse von Elementen Regeln zugewiesen werden.

Des Weiteren bietet Less Variablen, die wie z. B. die Konstanten in <a href="Java_(Programmiersprache)" title="Java (Programmiersprache)">Java</a> zentral festgelegt werden und sodann an mehreren Stellen benutzt werden können. In Abhängigkeit von diesen Variablen können auch Berechnungen und Verzweigungen durchgeführt werden. Außerdem unterstützt Less <a href="Mixin" title="Mixin">Mixins</a>: damit können Regeln unter einem Namen zusammengefasst und mit diesem an mehreren Stellen eingefügt werden, um so möglichst effektiv Code-Wiederholungen zu vermeiden.

<div class="mw-heading mw-heading2"><h2 id="Kompilierung">Kompilierung</h2></div>

Da Less in JavaScript geschrieben ist, kann es nicht nur server-, sondern auch clientseitig (im <a href="Webbrowser" title="Webbrowser">Webbrowser</a>) kompiliert werden. Ein Vorteil der clientseitigen Kompilierung für Entwickler ist, dass Änderungen am <a href="Quellcode" class="mw-redirect" title="Quellcode">Quellcode</a> mit Hilfe des Watch mode automatisch im Webbrowser aktualisiert werden.<a href="#cite_note-lesscss-org-usage-5">[5]</a> Dies kann Zeit bei der Entwicklung sparen.

<div class="mw-heading mw-heading2"><h2 id="Codebeispiele">Codebeispiele</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Variablen">Variablen</h3></div>

Mit Variablen ist es möglich, oft verwendete Werte (z. B. Farben) an mehreren Stellen zu verwenden, sowie ihre Abwandlungen (z. B. heller/dunkler, blasser (erdiger), im Farbwinkel gedreht) intelligent zu nutzen.<a href="#cite_note-lesscss-org-language-features-variables-6">[6]</a>

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>@meineFarbe: #143352;

#header {

background-color: @meineFarbe;

}

h2 {

color: @meineFarbe;

}

</pre></div>

Wird das ganze nun kompiliert, erhält man folgendes Ergebnis:

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#header {

background-color: #143352;

}

h2 {

color: #143352;

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Mixins">Mixins</h3></div>

In Mixins können mehrere Eigenschaften definiert werden, welche anschließend – ähnlich wie Variablen – Verwendung finden. Zudem können Parameter übergeben werden.<a href="#cite_note-lesscss-org-language-features-mixins-7">[7]</a> Auf diese Weise lässt sich leicht Code generieren, der mehrere <a href="Herstellerpr%C3%A4fix" title="Herstellerpräfix">Herstellerpräfixe</a> verwendet, ohne diese jedes Mal extra angeben zu müssen.

Anmerkung: Das konkrete Beispiel mit <code style="font-size:inherit">-x-border-radius</code> ist seit 2014 veraltet.<a href="#cite_note-8">[8]</a> Die Varianten mit Präfix sind seitdem wirkungslos.

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.rund (@radius: 4px) {

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

-o-border-radius: @radius;

border-radius: @radius;

}

#header {

.rund;

}

#footer {

.rund(21px);

}

</pre></div>

Dies wird kompiliert zu:

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#header {

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

}

#footer {

-moz-border-radius: 21px;

-webkit-border-radius: 21px;

-o-border-radius: 21px;

border-radius: 21px;

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Verschachtelung">Verschachtelung</h3></div>

Hiermit besteht die Möglichkeit, Selektoren ineinander zu verschachteln.

Das Verschachteln kann den Code kürzer und übersichtlicher machen, wodurch Fehler reduziert werden können.<a href="#cite_note-lesscss-org-language-features-nested-rules-9">[9]</a>

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#header {

h1 {

font-size: 26px;

font-weight: bold;

}

p { font-size: 12px;

a { text-decoration: none;

&:hover { border-width: 1px }

}

}

</pre></div>

Dies wird kompiliert zu:

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#header h1 {

font-size: 26px;

font-weight: bold;

}

#header p {

font-size: 12px;

}

#header p a {

text-decoration: none;

}

border-width: 1px;

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Operationen_und_Funktionen">Operationen und Funktionen</h3></div>

In Less können arithmetische Operatoren zur Berechnung von Werten verwendet werden.<a href="#cite_note-lesscss-org-language-features-operations-10">[10]</a> Mit Funktionen können Werte auf komplexere Art und Weise modifiziert werden. Dies ist hilfreich um zum Beispiel Farbwerte zu verändern (z. B.: Sättigung oder Helligkeit verändern) oder komplexere mathematische Berechnungen durchzuführen (z. B.: sin, cos, sqrt).<a href="#cite_note-lesscss-org-functions-11">[11]</a>

@size: 10px;

#header {

background-color: @meineFarbe;

}

h2 {

color: saturate(@meineFarbe, 20%);

font-size: @size * 4;

}

</pre></div>

Dies wird kompiliert zu:

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#header {

background-color: #143352;

}

h2 {

color: #0a335c;

font-size: 40px;

}

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>

<ul><li><a href="Sass_(Stylesheet-Sprache)" title="Sass (Stylesheet-Sprache)">Sass (Stylesheet-Sprache)</a></li>

<li><a href="Stylus_(Stylesheet-Sprache)" title="Stylus (Stylesheet-Sprache)">Stylus (Stylesheet-Sprache)</a></li>

<li><a href="Bootstrap_(Framework)" title="Bootstrap (Framework)">Bootstrap (Framework)</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>

<ul><li>Alex Libby: Instant LESS CSS Preprocessor How-to., Packt Publishing, 2013, ISBN 978-1-78216-376-3.</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"></div><a href="https://de.wikiversity.org/wiki/Kurs:Neueste_Internet-_und_WWW-Technologien/Less_CSS" class="extiw external" title="v:Kurs:Neueste Internet- und WWW-Technologien/Less CSS">Wikiversity: Kurs:Neueste Internet- und WWW-Technologien/Less CSS</a> – Kursmaterialien</div>

<ul><li><a rel="nofollow" class="external text" href="http://lesscss.org">Offizielle Website</a> (englisch)</li>

<li><a rel="nofollow" class="external text" href="https://github.com/less">Less auf Github</a> (englisch)</li>

<li><a rel="nofollow" class="external text" href="http://www.ibm.com/developerworks/library/wa-less/">Do more in CSS with LESS, IBM Developer Works</a></li>

<li>Florence Maurice: <a rel="nofollow" class="external text" href="http://www.pc-magazin.de/ratgeber/css-konzentrat-less-bietet-mehr-1277436.html">CSS-Konzentrat: LESS bietet mehr.</a> PC Magazin, 3. Juli 2012, abgerufen am 4. Oktober 2013.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=CSS-Konzentrat%3A+LESS+bietet+mehr&rft.description=CSS-Konzentrat%3A+LESS+bietet+mehr&rft.identifier=http%3A%2F%2Fwww.pc-magazin.de%2Fratgeber%2Fcss-konzentrat-less-bietet-mehr-1277436.html&rft.creator=Florence+Maurice&rft.publisher=PC+Magazin"> </li>

<li>Dieter Petereit: <a rel="nofollow" class="external text" href="http://www.drweb.de/magazin/8-kostenlose-tools-von-css-zu-less-und-wieder-zuruck/">8 kostenlose Tools: Von CSS zu LESS und wieder zurück.</a> drweb.de, 9. Mai 2012, abgerufen am 4. Oktober 2013.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=8+kostenlose+Tools%3A+Von+CSS+zu+LESS+und+wieder+zur%C3%BCck&rft.description=8+kostenlose+Tools%3A+Von+CSS+zu+LESS+und+wieder+zur%C3%BCck&rft.identifier=http%3A%2F%2Fwww.drweb.de%2Fmagazin%2F8-kostenlose-tools-von-css-zu-less-und-wieder-zuruck%2F&rft.creator=Dieter+Petereit&rft.publisher=drweb.de"> </li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-_dee2248ffb0e4372-1"><a href="#cite_ref-_dee2248ffb0e4372_1-0">↑</a> <a rel="nofollow" class="external text" href="https://github.com/less/less.js/releases/tag/v4.4.2"><cite style="font-style:italic">Release 4.4.2</cite>.</a> 6. Oktober 2025 (abgerufen am 20. Oktober 2025).

</li>

<li id="cite_note-_c17f153534de1446-2"><a href="#cite_ref-_c17f153534de1446_2-0">↑</a> <a rel="nofollow" class="external text" href="https://github.com/less/less.js/blob/master/LICENSE"><cite style="font-style:italic">github.com</cite>.</a>

</li>

Ilja Zaglov: <a rel="nofollow" class="external text" href="https://t3n.de/news/besseres-css-mit-less-488092/">Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow.</a> In: <a href="T3n" title="T3n">t3n</a>. 27. August 2013, abgerufen am 6. Februar 2016.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Weniger+ist+mehr%3A+So+optimierst+du+mit+LESS+deinen+CSS-Workflow&rft.description=Weniger+ist+mehr%3A+So+optimierst+du+mit+LESS+deinen+CSS-Workflow&rft.identifier=https%3A%2F%2Ft3n.de%2Fnews%2Fbesseres-css-mit-less-488092%2F&rft.creator=Ilja+Zaglov&rft.date=2013-08-27&rft.language=de">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/about">About.</a> History. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=About&rft.description=About&rft.identifier=http%3A%2F%2Flesscss.org%2Fabout&rft.language=en">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/usage">Usage.</a> In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Usage&rft.description=Usage&rft.identifier=http%3A%2F%2Flesscss.org%2Fusage&rft.language=en">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/features/#features-overview-feature-variables">Language Features.</a> Variables. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Language+Features&rft.description=Language+Features&rft.identifier=http%3A%2F%2Flesscss.org%2Ffeatures%2F%23features-overview-feature-variables&rft.language=en">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/features/#features-overview-feature-mixins">Language Features.</a> Mixins. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Language+Features&rft.description=Language+Features&rft.identifier=http%3A%2F%2Flesscss.org%2Ffeatures%2F%23features-overview-feature-mixins&rft.language=en">

</li>

<li id="cite_note-8"><a href="#cite_ref-8">↑</a> Vergleiche <a rel="nofollow" class="external text" href="https://caniuse.com/border-radius">Can I use... CSS3 Border-radius (rounded corners)</a> oder ohne Zeitangabe direkt in den <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a>, siehe <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#browser_compatibility">border-radius - browser compatibility</a>.

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/features/#features-overview-feature-nested-rules">Language Features.</a> Nested Rules. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Language+Features&rft.description=Language+Features&rft.identifier=http%3A%2F%2Flesscss.org%2Ffeatures%2F%23features-overview-feature-nested-rules&rft.language=en">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/features/#features-overview-feature-operations">Language Features.</a> Operations. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Language+Features&rft.description=Language+Features&rft.identifier=http%3A%2F%2Flesscss.org%2Ffeatures%2F%23features-overview-feature-operations&rft.language=en">

</li>

<a rel="nofollow" class="external text" href="http://lesscss.org/functions">Functions.</a> In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ALess+%28Stylesheet-Sprache%29&rft.title=Functions&rft.description=Functions&rft.identifier=http%3A%2F%2Flesscss.org%2Ffunctions&rft.language=en">

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-12-14" href="https://de.wikipedia.org/wiki/?title=Less_(Stylesheet-Sprache)&oldid=262428136">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>